<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <form name="form">
        <!-- 视图值：viewValue -->
        <input type="number" name="rate" ng-model="rate" zy-rate required> %
        <span ng-show="form.rate.$error.number"> × </span>
    </form>
    <br>
    <!-- 模型值:modelValue -->
    比率是：{{rate}}
</div>
</body>
<script>
    var app = angular.module('myApp', [])
    app.controller('myCtrl', function($scope){
        $scope.rate = 0.01
    })
        .directive('zyRate', function(){
            return {
//           限制指令的调用方法
                restrict:'A',
                require:'ngModel',
//  输入框的值在显示到页面上时，
// 会通过ngModelController内置的验证及解析方法
//     验证：$validators
//                验证错误对象类型：
//       参考网址：https://docs.angularjs.org/api/ng/type/form.FormController
//     解析: $parsers
//     ngmodelcontroller参考网址
//                https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
                link:function(scope, ele, attrs,ctrls){
//                    console.log(ctrls)
//                    找到ngModelController :ctrls
// $parsers作用：解析或转换viewValue的过程
//     ngmodel会读取输入框的值，并一次执行特定的一组方法，将最后一个方法的返回值
//             传递给modelValue
//      是将viewValue到modelValue的转换器
//      $formatters与$parsers作用相反，将modelValue重新格式化成一个新的viewValue
                    ctrls.$parsers.push(function(value){
//                        value:viewValue,视图上的值
//                        console.log(value)
//                        console.log(value / 100)
                        return value/100
                    })

//      $formatters与$parsers作用相反
                    ctrls.$formatters.push(function(value){
                        console.log('格式化方法执行')
                        console.log(value)
                        return value*100
                    })

                }
            }
        })


</script>
</html>